@extends('layout.main')

@section('head')
	@parent
	<link rel="stylesheet" type="text/css" href="/css/common.css">
@stop


@section('content')
<div class="ui teal button fixmiddle fixed">
  	<i class="content icon"></i>
  	<span class="text">菜单</span>
</div>

<!-- 左侧 -->
<div class="ui red vertical demo sidebar menu grid">
    <h3 class="ui header">
        <i class="user icon"></i>
        <div class="content">
            @if( Auth::check() )
                <a href="/userinfo" target="_blank">{{ Auth::user()->username  }}</a>
                <a href="/auth/logout">退出</a>
            @else
            	<a href="/auth/login">登陆</a>
                <a href="/auth/register">注册</a>
            @endif
        </div>
    </h3>
	<!-- <div class="ui row">
		<div class="ui action input">
		  	<input type="text" placeholder="关键字">
		  	<button class="ui icon button">
		    	<i class="search icon"></i>
		  	</button>
		</div>
	</div> -->
	@if( Auth::check() )
		<div class="ui row">
			<div class="ui horizontal divider">我的收藏</div>
			<div class="ui ordered list">
			 	@foreach($collect as $v)
			  		<a class="item" target="_blank" href="{{ $v->url }}">{{ $v->title }}</a>
			  	@endforeach
			  	@if($collect) <a class="item" href="/collect" target="_blank" style="color:green;font-weight: 700">更多...</a> @endif
			</div>
		</div>

		<div class="ui row">
			<div class="ui horizontal divider">我的好友</div>
			<div class="ui animated list">
				<div class="item">
					<img class="ui avatar image" src="/images/helen.jpg">
					<div class="content">
					  <div class="header">Helen</div>
					</div>
				</div>
				<div class="item">
					<img class="ui avatar image" src="/images/christian.jpg">
					<div class="content">
					  	<div class="header">Christian</div>
					</div>
				</div>
				<div class="item">
					<img class="ui avatar image" src="/images/daniel.jpg">
					<div class="content">
					  <div class="header">Daniel</div>
					</div>
				</div>
		  	</div>
		</div>
	@endif

	<div class="ui row">
		<div class="ui horizontal divider"><a href="/square" target="_blank">广场</a></div>
	</div>
</div>

<!-- 中间列表 -->
<div class="pusher">
	<div class="ui centered page stackable grid">
		<div class="sixteen wide column">
			<table class="ui striped table">
				<thead>
					<tr>
						<th>标题</th>
						<th>发布时间</th>
					</tr>
				</thead>
				@forelse( $data as $item )
					<tr>
						<td class="left aligned" width="85%">
							<a target="_blank" href="{{ $item->url }}" data-tid="{{ $item->title_id }}">
								{{ $item->title }} 
							</a>
							@if( $item->has_img ) 
								<i class="file image outline large blue icon link icon" data-tid="{{ $item->title_id }}"></i>
							@endif
						</td>
						<td>{{ $item->pub_time }}</td>
					</tr>
				@empty
					暂无数据
				@endforelse
			</table>
		</div>
		<div class="sixteen wide column">
			{!! $data->render() !!}
		</div>
	</div>
</div>

<!-- 弹出层modal -->
<div class="ui small modal collect">
	<div class="content">

	</div>
</div>

<div class="ui modal imgs">
	<div class="content">
		
	</div>
</div>

@stop

@section('foot')
	@parent
	<script type="text/javascript">
		/*侧边栏*/
		$('.demo.sidebar').sidebar({
			'dimPage'  : false,
			'closable' : false
		}).sidebar('attach events', '.fixmiddle');
		$('.fixmiddle').removeClass('disabled');

		/*添加收藏*/
		$('.table tr td').mouseenter(function(){
			$('<i class="heart red large icon"></i>').insertBefore($(this).find('a')[0]);

			$('.heart').click(function() {
				var uid = {{ Auth::check() ? Auth::user()->id : 0 }};
				var tid = $(this).next().attr('data-tid');

				$.get('/tocollect/' + uid + '/' + tid, function(res) {
					if (res == '未登陆') {
						window.location.href = '/auth/login';
					}
					else {
						var message = res.error == 1 ? '<span class="collect_message">已收藏</span>' : '<span class="collect_message">收藏成功</span>';
						var html = res.error == 1 ? '<i class="warning huge red sign icon"></i>' : '<i class="checkmark teal huge icon"></i>';

						$('.ui.modal.collect .content').empty();
						$('.ui.modal.collect .content').html(html + message);
						$('.ui.modal.collect').modal('show');
					}

				});
			});
		}).mouseleave(function() {
			$(this).find('.heart').remove();
		});

		$('.link').click(function() {
			var tid = $(this).attr('data-tid');
			$.get('/image/'+tid, function(images) {
				if(images) {
					var html = '';
					for(var i in images) {
						html += '<img class="ui image" src="'+images[i]+'">';
					}
					$('.ui.modal.imgs .content').empty();
					$('.ui.modal.imgs .content').html(html);
					$('.ui.modal.imgs').modal('show');
				}
			}, 'json');
		});
	</script>
@stop